CSS

  • Cascading Stylesheets
  • Not a programming language
  • formatting and customizing style of html file image.png

1.Three styles using css

  • external style
    • store in .css file
    • using <link> in a html file to call css file
    <link rel="stylesheet" href="./css/style.css">
  • internal style
    • no external .css file
    • put css part into <style> in a html file
      <style>
        h1 {
            color: rebeccapurple;
        }
      </style>
  • inline style
    • only for one element
    • using style property within that element
    <h1 style="color: red;">Hello World</h1>

2. How to select / identify a element in HTML

  • Using tage
  • Using class
  • Using id (unique) image.png
  • Example

    • In .html file

        <div class="container">
        <div class="box1">
            <h1 style="color: red;">Hello World</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias hic eaque dolores labore laboriosam cupiditate dolorum ab exercitationem eius, consequuntur, corporis vel aspernatur quidem obcaecati at modi dicta repudiandae illum quae totam libero, ducimus est nulla dolor? Doloremque vel natus suscipit laborum assumenda ab corrupti. Ratione vero in quo quibusdam est animi error eos deserunt illum atque laboriosam nesciunt, voluptatum, dicta nam optio saepe aperiam cupiditate beatae cum et? Unde, commodi aperiam vitae illum illo est et sunt consequatur? Illum ad sed, fugit sequi tempore quaerat eligendi laudantium amet perspiciatis corporis illo. Consectetur fugiat beatae officia, sunt at magnam saepe?</p>
        </div>
      </div>
    • In .css file

      .box1 {
      background-color: antiquewhite;
      color: royalblue;
      }
      
      .container{
        width: 80%;
        margin: auto;
      }

3. Colors in css

image.png

image.png

body {
    background-color: #f4f4f4;
    color: #555555;

}


.box1 {
    background-color: antiquewhite;
    color: royalblue;
}

4. Font in css

  • when the font name contains space, we should use quotation mark to refer it
  • could input multiple fonts, would follow the order to use them image.png
  • Example image.png
    .box1 h1{
      font-family: 'Times New Roman', Times, serif;
      font-weight: 800;
      font-style: italic;
      text-decoration: underline;
      text-transform: uppercase;
      letter-spacing: lem;
      word-spacing: 2em;
    }

5. Box modle in CSS

image.png

  • When two box comes together, only keep the larger margin as the shared margin image.png

How to set margin or padding

image.png

  • Example image.png

    .box1 {
      background-color: antiquewhite;
      color: royalblue;
    
      border: 5px cyan solid;
      border-right: 10px green dotted;
      border-bottom: 1px firebrick double;
      border-top: 8px blueviolet dashed;
    
      padding-top: 10px;
      padding-right: 10px;
      margin-top: 20px;
    }

image.png

.box2 {
    border: 5px dotted #cccccc;
    border-radius: 30px;
    padding: 20px;
    margin: 20px;
}

6. Button in CSS

image.png

button:hover{
    background-color: red;
}

button:active {
    background-color: antiquewhite;
}
button {
    background-color: #444444;
    color: #ffffff;
    padding: 10px 15px;
}

image.png

a {
    text-decoration: none;
    color: #555555;
}

a:hover {
    color: cyan;
}

a:visited {
    color: darkblue;
}

8. Formatting in CSS

image.png

.block {
    float: left;
    width: 33%;
    padding: 10px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
}

image.png

#main-block {
    float: left;
    width: 70%;
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

#side-block {
    float: left;
    width: 30%;
    border: 1px solid #cccccc;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

.clearfix {
    clear: both;
}

After using float, remenber to clear it!

image.png

.list2 li:nth-child(even){
    background-color: grey;
}
.list2 li:first-child {
    background-color: red;
}
.list2 li:nth-child(3) {
    background-color: aqua;
}

9. Position in CSS

  • the offset of relative based on the original position without the offset
  • the offset of absolute based on the current view window image.png

image.png

.box2 {
    border: 5px dotted #cccccc;
    border-radius: 30px;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.box2 h1 {
    position: absolute;
    top: 30px;
    left: 20px;
}

It means, the absolute only for their parent node, not for the root node

  • fixed button image.png
    #fixed {
      position: fixed;
      right: 0;
      bottom: 200px;
    }

10. More exercises

Do more exercises on this website: https://developer.mozilla.org/en-US/docs/Learn/CSS

Overall look(without css)

In [8]:
from IPython.display import IFrame
IFrame(src='./index.html', width=1000, height=600)
Out[8]: